<template>
  <div class="reset-password-container">
    <h2>重置密码</h2>
    <form @submit.prevent="onResetPassword">
      <!-- 手机号 + 验证码按钮行 -->
      <div class="form-row">
        <div class="form-group">
          <label>手机号：</label>
          <input v-model="phoneNumber" placeholder="请输入11位手机号" />
        </div>
        <button 
          type="button" 
          :disabled="sending || countdown > 0" 
          @click="onSendCode"
          class="code-btn"
        >
          {{ countdown > 0 ? countdown + '秒后重新发送' : '发送验证码' }}
        </button>
      </div>

      <!-- 验证码 -->
      <div class="form-group">
        <label>验证码：</label>
        <input v-model="verificationCode" placeholder="请输入6位验证码" />
      </div>

      <!-- 新密码 -->
      <div class="form-group">
        <label>新密码：</label>
        <input type="password" v-model="newPassword" placeholder="8-20位密码" />
      </div>

      <button type="submit" class="submit-btn">重置密码</button>
      
      <p v-if="error" class="error">{{ error }}</p>
      <p v-if="success" class="success">{{ success }}</p>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { sendVerificationCode, resetPassword } from '@/utils/auth.js'

const phoneNumber = ref('')
const verificationCode = ref('')
const newPassword = ref('')

const error = ref('')
const success = ref('')
const sending = ref(false)
const countdown = ref(0)

let timer = null

function startCountdown() {
  countdown.value = 60
  timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)
}

async function onSendCode() {
  error.value = ''
  success.value = ''
  if (!/^\d{11}$/.test(phoneNumber.value)) {
    error.value = '请输入有效的11位手机号'
    return
  }
  sending.value = true
  try {
    const res = await sendVerificationCode(phoneNumber.value, 'reset')
    if (res.data.code === 0) {
      success.value = '验证码发送成功'
      startCountdown()
    } else {
      error.value = res.data.message || '发送失败'
    }
  } catch {
    error.value = '发送失败'
  } finally {
    sending.value = false
  }
}

async function onResetPassword() {
  error.value = ''
  success.value = ''

  if (!/^\d{11}$/.test(phoneNumber.value)) {
    error.value = '请输入有效的11位手机号'
    return
  }
  if (!/^\d{6}$/.test(verificationCode.value)) {
    error.value = '请输入6位验证码'
    return
  }
  if (newPassword.value.length < 8 || newPassword.value.length > 20) {
    error.value = '密码长度应为8-20位'
    return
  }

  try {
    const res = await resetPassword(
      phoneNumber.value, 
      verificationCode.value, 
      newPassword.value
    )
    if (res.data.code === 0) {
      success.value = '密码重置成功，请重新登录'
      phoneNumber.value = ''
      verificationCode.value = ''
      newPassword.value = ''
    } else {
      error.value = res.data.message || '重置失败'
    }
  } catch {
    error.value = '重置失败'
  }
}
</script>

<style scoped>
.reset-password-container {
  max-width: 360px;
  margin: 60px auto;
  font-family: 'Inter', sans-serif;
  padding: 20px;
}

h2 {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 6px;
}

input {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  outline: none;
  box-sizing: border-box;
}

input::placeholder {
  color: #9ca3af;
}

/* 手机号+验证码按钮行 */
.form-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 20px;
}

.form-row .form-group {
  flex: 2;
  margin-bottom: 0;
}

.code-btn {
  flex: 1;
  height: 45px;
  padding: 12px 10px;
  white-space: nowrap;
  background-color: #111827;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.code-btn:hover {
  background-color: #1f2937;
}

.code-btn:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}

.submit-btn {
  width: 100%;
  background-color: #111827;
  color: white;
  padding: 12px;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 10px;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #1f2937;
}

.error {
  color: #ef4444;
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
}

.success {
  color: #10b981;
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
}
</style>